<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加按钮 -->
    <el-card class="box-card">
      <!-- 添加商品按钮 -->
      <el-button type="primary" @click="dialogFormRoles = true"
        >添加角色</el-button
      >
    </el-card>
    <!--渲染角色列表  -->
    <el-table :data="RolesData" style="width: 100%" border height='350'>
      <el-table-column type="expand" label="" icon="el-icon-arrow-right">
        <template slot-scope="props">
          <!-- 一级角色权限遍历 -->
          <el-row
            v-for="item in props.row.children"
            :key="item.id"
            class="borderBom"
          >
            <!-- 栅格化为 4 -20 分 -->
            <el-col :span="4" class="selone">
              <el-button type="primary" size="mini" plain>
                {{ item.authName }}
                <i
                  class="el-icon-close"
                  @click="deleteRoles(props.row, item.id)"
                ></i>
              </el-button>
              <i class="el-icon-caret-right"></i>
            </el-col>
            <!-- 二级和三级联动 -->
            <el-col :span="20">
              <!-- 遍历二级数据 -->
              <el-row v-for="item1 in item.children" :key="item1.id">
                <!-- 栅格系统化为 5 -19 -->
                <!-- 二级遍历 -->
                <el-col :span="5" class="selone">
                  <el-button type="warning" size="mini" plain
                    >{{ item1.authName }}
                    <i
                      class="el-icon-close"
                      @click="deleteRoles(props.row, item1.id)"
                    ></i>
                  </el-button>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <!-- 三级遍历 -->
                <el-col :span="19" class="selone">
                  <el-button
                    type="success"
                    plain
                    v-for="item2 in item1.children"
                    :key="item2.id"
                    size="mini"
                    >{{ item2.authName }}
                    <i
                      class="el-icon-close"
                      @click="deleteRoles(props.row, item2.id)"
                    ></i>
                  </el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="#" prop="id" width="120"> </el-table-column>
      <el-table-column label="角色名称" prop="roleName"> </el-table-column>
      <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
      <!-- 使用作用于插槽 -->
      <el-table-column label="操作" prop="desc" width="450">
        <template slot-scope="scope">
          <el-row>
            <el-button
              icon="el-icon-search"
              size="mini"
              @click="beforeSerch(scope.row)"
              >查询</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="beforeEditRoles(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="DeleteRoles(scope.row)"
              >删除</el-button
            >
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-setting"
              @click="PermissionSerch(scope.row)"
              >分配权限</el-button
            >
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加用户弹窗-->
    <el-dialog title="添加角色" :visible.sync="dialogFormRoles">
      <el-form :model="AddRolesData">
        <el-form-item label="角色名">
          <el-input
            v-model="AddRolesData.roleName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input
            v-model="AddRolesData.roleDesc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormRoles = false">取 消</el-button>
        <el-button type="primary" @click="addRoles">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑角色弹窗-->
    <el-dialog title="编辑角色" :visible.sync="dialogChangRoles">
      <el-form :model="EditingRoleData">
        <el-form-item label="角色名">
          <el-input
            v-model="EditingRoleData.roleName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input
            v-model="EditingRoleData.roleDesc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outputEditRoles">取 消</el-button>
        <el-button type="primary" @click="putEditRoles">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查询信息弹窗 -->
    <el-dialog title="用户信息" :visible.sync="dialogSerchUser">
      <el-form :model="serchUserData">
        <el-form-item label="角色名称">
          <el-input
            v-model="serchUserData.roleName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input
            v-model="serchUserData.roleDesc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSerchUser = false">取 消</el-button>
        <el-button type="primary" @click="dialogSerchUser = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 权限弹窗 -->
    <!-- 角色授权弹出框 -->
    <el-dialog title="角色授权" :visible.sync="dialogPermissions" width="50%">
      <!-- 绑定角色权限的用户和树状信息，默认唯一的树节点，设置节点是否可选择， -->
      <el-tree
        :data="Permissions"
        :props="RolesTree"
        show-checkbox
        node-key="id"
        
      ></el-tree>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPermissions = false">取 消</el-button>
        <el-button type="primary" @click="dialogPermissions = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //渲染页面的数组
      RolesData: [],
      //添加角色弹窗
      dialogFormRoles: false,
      //添加角色遍历对象
      AddRolesData: {
        roleName: "",
        roleDesc: "",
      },
      //编辑角色弹窗
      dialogChangRoles: false,
      //编辑角色数据
      EditingRoleData: {},
      //用户查询遍历
      serchUserData: {},
      //查询弹窗
      dialogSerchUser: false,
      //分配权限
      Permissions: {},
      //分配权限弹窗
      dialogPermissions: false,
      //遍历数组
      RolesTree: {
        label: "authName", //树状权限角色的每个属性值
        children: "children", //这个是绑定子树状信息(实现嵌套)
      },
    };
  },
  methods: {
    //获取用户数据封装
    async getUserRoles() {
      // 获取用户数据
      var { data } = await this.$axios.get("roles");
      // console.log(data);
      if (data.meta.status == 200) {
        this.RolesData = data.data;
      } else {
        this.$message({
          type: "error",
          message: data.meta.msg,
        });
      }
    },
    //添加角色
    async addRoles() {
      var { data } = await this.$axios.post("/roles", this.AddRolesData);
      //弹窗消失
      this.dialogFormRoles = false;
      console.log(data);
      if (data.meta.status == 201) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        //清空
        this.AddRolesData = {};
        //重新渲染
        this.getUserRoles();
      } else {
        this.$message({
          type: "error",
          message: data.meta.msg,
        });
      }
    },
    //编辑角色渲染数据
    beforeEditRoles(userinfo) {
      this.dialogChangRoles = true;
      this.EditingRoleData = userinfo;
    },
    //编辑角色
    async putEditRoles() {
      //发送请求
      var { data } = await this.$axios.put(
        "/roles/" + this.EditingRoleData.id,
        this.EditingRoleData
      );
      //   console.log(data);
      //关闭弹窗
      this.dialogChangRoles = false;
      if (data.meta.status == 200) {
        this.$message({
          type: "success",
          message: "修改成功！",
        });
        //重新渲染数据
        this.getUserRoles();
      } else {
        this.$message({
          type: "error",
          message: data.meta.msg,
        });
      }
    },
    //取消角色渲染
    outputEditRoles() {
      (this.dialogChangRoles = false), this.getUserRoles();
    },
    //删除角色
    DeleteRoles(userinfo) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var { data } = await this.$axios.delete(`/roles/` + userinfo.id);
          if (data.meta.status == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //重新渲染页面
            this.getUserRoles();
          } else {
            this.$message({
              type: "error",
              message: "未知错误",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //根据id查询角色
    async beforeSerch(userinfo) {
      this.dialogSerchUser = true;
      this.serchUserData = userinfo;
    },
    //删除角色的权限
    deleteRoles(userinfo, rightId) {
      this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var { data } = await this.$axios.delete(
            `/roles/${userinfo.id}/rights/${rightId}`
          );
          if (data.meta.status == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //重新渲染页面
            this.getUserRoles();
          } else {
            this.$message({
              type: "error",
              message: "未知错误",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分配权限
    async PermissionSerch() {
      //获取树状的角色权限
      var { data } = await this.$axios.get("/rights/tree");
      //判断成功将数据赋值给rightjuese，并让弹出框显示
      if (data.meta.status == 200) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.Permissions = data.data;
        this.dialogPermissions = true;
      } else {
        //判断失败，就弹出弹框提醒用户
        this.$message({
          type: "error",
          message: data.meta.msg,
        });
      }
    },
  },
  mounted() {
    this.getUserRoles();
  },
};
</script>

<style>
.has-gutter {
  line-height: 35px;
}
.el-row {
  line-height: 60px;
}
.selone {
  border-bottom: 1px solid #eee;
}

.el-dialog {
  width: 25vw;
}
.el-dialog__header {
  line-height: 0px;
}
.dialog-footer {
  line-height: 0px;
}
.borderBom {
  border-bottom: 1px solid #eee;
}
.el-dialog__header {
  line-height: 0px;
}
.dialog-footer {
  line-height: 0px;
}
.has-gutter {
  line-height: 35px;
}
.el-row {
  line-height: 60px;
}
.el-card__body {
  line-height: 0px;
}
.serch {
  width: 22vw !important;
}
</style>